<template>
  <!-- 联系人信息 -->
  <div>
    <div class="middle-box">
      <span class="title"> 联系人信息 </span>
    </div>
    <div class="btn_asset">
      <span class="btn_left">
        <el-button type="primary" @click="NewData"> 新增 </el-button>
        <el-button @click="batchDelete"> 删除 </el-button>
      </span>
      <span class="btn_right">
        <el-button size="small">
          <el-icon style="margin-right: 2px; margin-bottom: 2px"
            ><RefreshRight /></el-icon
          >刷新
        </el-button>
      </span>
    </div>
    <el-table
      stripe
      border
      class="el-table"
      height="100%"
      size="small"
      ref="table"
      :data="state.tableData"
      :cell-class-name="tableCellClassName"
      v-loading="state.loading"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="姓名">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.name"
              placeholder="请输入"
              size="small"
              clearable
            />
          </div>
          <span v-else>
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.department"
              placeholder="请输入"
              size="small"
              clearable
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.department }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="职务">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.job"
              placeholder="请输入"
              size="small"
              clearable
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.email }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.homePhone"
              size="small"
              placeholder="请输入"
              clearable
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.homePhone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.mobilePhone"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.apartment }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="QQ">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.QQ"
              size="small"
              placeholder="请输入"
              clearable
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.QQ }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邮箱">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.email"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.email }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否为主要联系人">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-checkbox
              v-model="scope.row.isMainContact"
              label=""
              size="large"
            />
          </div>
          <span v-else>
            {{ scope.row.isMainContact == true ? "是" : "否" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.remark"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.remark }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增联系人信息 -->
    <el-dialog title="联系人信息" v-model="state.dialogData.show" width="860px">
      <el-form
        :model="state.formData"
        :rules="state.formRules"
        label-suffix=":"
        label-width="80px"
        ref="form"
      >
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="state.formData.name"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位" prop="gangwei">
              <el-input
                v-model="state.formData.gangwei"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="部门" prop="department">
              <el-input
                v-model="state.formData.department"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="job">
              <el-input
                v-model="state.formData.job"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="电话" prop="homePhone">
              <el-input
                v-model="state.formData.homePhone"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机" prop="mobilePhone">
              <el-input
                v-model="state.formData.mobilePhone"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="QQ" prop="qq">
              <el-input
                v-model="state.formData.qq"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="state.formData.email"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="主要联系人" prop="isMainContact">
              <el-checkbox
                class="contacts"
                v-model="state.formData.isMainContact"
                label=""
                size="large"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="state.formData.remark"
                :rows="2"
                type="textarea"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="background: #5d9df5"
            @click="next"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  onMounted,
  toRaw,
  watch,
  defineProps,
  defineEmits,
  nextTick,
  defineExpose
} from "vue";
import { useRoute } from "vue-router";
import request from "@/public/request";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits();
const route = useRoute();
const props = defineProps({
  isNew: Boolean,
});
const NewData = () => {
  closeDiag();
  state.dialogData.show = true;
};
const form = ref();
const table = ref();
const cancel = () => {
  state.dialogData.show = false;
  form.value.clearValidate();
};
const getList = async () => {
  let res = await request.get("/api/crcontactor/queryby", {
    Id: route.query.id,
  });
  state.tableData = res.data;
  state.compareTableData = JSON.parse(JSON.stringify(res.data))
};
const resetTableData = () => {
  state.tableData = JSON.parse(JSON.stringify(state.compareTableData))
}
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  column.index = columnIndex;
  row.index = rowIndex;
};
const cellClick = (row, column, cell, event) => {
  state.rowIndex = row.index;
  state.columnIndex = column.index;
};
const handleSelectionChange = (val) => {
  let arr = [];
  for (let item of val) {
    let ret = toRaw(item);
    if (ret !== undefined) {
      arr.push(ret);
    }
  }
  state.tableSelect = arr;
};
const batchDelete = () => {
  // 批量删除
  let deleteSelectArray = [];
  if (state.tableSelect.length > 0) {
    deleteSelectArray = state.tableSelect.map((item) => {
      return item.id;
    });

    ElMessageBox.confirm("确定删除所选其他地址信息吗", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        for (let i = 0; i < deleteSelectArray.length; i++) {
          state.tableData = state.tableData.filter(
            (item) => item.id != deleteSelectArray[i]
          );
        }
      })
      .catch(() => {
        ElMessage.info("取消删除");
      });
  } else {
    ElMessage.warning("请先选择");
  }
};
const next = async () => {
  await form.value.validate();
  state.tableData.push({
    id: state.tableData.length + 1,
    createBy: "",
    createTime: "2024-1-30 17:57:20",
    updateBy: "",
    updateTime: "",
    isDeleted: true,
    relationType: "",
    name: state.formData.name,
    sex: "",
    department: state.formData.department,
    postId: 0,
    officeTelephone: "",
    mobilePhone: state.formData.mobilePhone,
    homePhone: state.formData.homePhone,
    qq: state.formData.qq,
    msn: state.formData.msn,
    email: state.formData.email,
    importantDegree: "",
    restDays: "",
    isMainContact: state.formData.isMainContact,
    userNature: "",
    remark: state.formData.remark,
    cs: "",
    sales: "",
    ms: "",
    contactComId: route.query.id,
  });
  state.dialogData.show = false;
  ElMessage.success("成功");
};
const closeDiag = () => {
  //清除框
  state.formData.name = "";
  state.formData.department = "";
  state.formData.telePhone = "";
  state.formData.mobilePhone = "";
  state.formData.homePhone = "";
  state.formData.department = "";
  state.formData.msn = "";
  state.formData.email = "";
  state.formData.isMainContact = "";
  state.formData.remark = "";
  nextTick(() => {
    form.value.clearValidate();
  });
};

const state = reactive({
  rowIndex: -1, //行索引
  columnIndex: -1, //列索引
  query: {
    KeyWords: "",
  },
  loading: false,
  formData: {
    id: 0,
    createBy: "",
    createTime: "2024-1-30 17:57:20",
    updateBy: "",
    updateTime: "",
    isDeleted: true,
    relationType: "",
    name: "",
    sex: "",
    department: "",
    postId: 0,
    officeTelephone: "",
    mobilePhone: "",
    homePhone: "",
    qq: "",
    msn: "",
    email: "",
    importantDegree: "",
    restDays: "",
    isMainContact: true,
    userNature: "",
    remark: "",
    cs: "",
    sales: "",
    ms: "",
    contactComId: route.query.id,
  },
  tableSelect: [],
  formRules: {
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
  },
  tableData: [],
  compareTableData: [],
  isUpdatess: false,
  option: [
    {
      value: "王艳娇",
      label: "王艳娇",
    },
    {
      value: "大",
      label: "大",
    },
  ],
  dialogData: {
    title: "",
    show: false,
  },
});

watch(
  () => state.tableData,
  (newVal, oldVal) => {
    if (state.isUpdatess) {
      emit("contactInfoData", newVal);
      emit("acceptData", newVal);
    }
    state.isUpdatess = true;
  },
  { deep: true }
);

defineExpose({
  resetTableData,//把子组件的方法暴露一个出口
  getList
})

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.middle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    border-left: 2px solid #5d9df5;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 600;
  }
}
.btn_asset {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
  font-weight: 600;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #dee1e6;
}
::v-deep .dialog-footer {
  height: 24px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
.contacts {
  margin-top: -8px;
}
.el-table {
  ::v-deep .el-checkbox.el-checkbox--large {
    height: 22px;
  }
}
</style>
